<template>
  <!-- body -->
  <div class="mt-5">
    <NDataTable
      :loading="mrLoading"
      :columns="column"
      :data="list"
      style="--n-merged-td-color-hover: transparent"
    ></NDataTable>

    <!-- 分页 -->
    <div class="page">
      <NFlex justify="center">
        <NPagination
          v-model:page="pageMessage.pageNumber"
          :page-size="pageMessage.pageSize"
          :item-count="pageMessage.total"
          @update-page="queryReportMessage"
        ></NPagination>
      </NFlex>
    </div>
  </div>

  <!-- 弹框而已 -->
  <div>
    <!-- 举报详情 弹框 -->
    <div>
      <NModal style="width: 45vw" v-model:show="rivisible" title="举报详情" preset="dialog">
        <NDataTable
          class="mt-5 mb-3"
          :bordered="false"
          :bottom-bordered="false"
          style="--n-merged-td-color-hover: transparent"
          :loading="riLoading"
          :columns="rcolumn"
          :data="reportReasonList"
        ></NDataTable>

        <!-- 分页 -->
        <div class="page" v-if="!riLoading">
          <NFlex justify="center">
            <NPagination
              v-model:page="pageInfo.pageNumber"
              :page-size="pageInfo.pageSize"
              :item-count="pageInfo.total"
              @update-page="queryReportMessageInfo"
            ></NPagination>
          </NFlex>
        </div>
      </NModal>
    </div>

    <!-- 删帖弹框 -->
    <div>
      <NModal style="width: 30vw" v-model:show="dvisible" title="删帖" preset="dialog" type="error">
        <div>
          <NInput
            v-model:value="dInfo.reason"
            placeholder="请输入删除理由"
            type="textarea"
            rows="4"
          ></NInput>
        </div>

        <template #action>
          <NSpace>
            <NButton :loading="dLoading" type="error" @click="deleteMessage()">确认删除</NButton>
          </NSpace>
        </template>
      </NModal>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Api } from '@/types/Api'
import type { BaseDataResult, BaseResult, PageBean, PageVO } from '@/types/BaseResult'
import type { TbMessage, TbMessageReport } from '@/types/Message'
import { h, onMounted, ref } from 'vue'
import {
  NDataTable,
  useMessage,
  type DataTableColumn,
  NSpace,
  NButton,
  NFlex,
  NPagination,
  NModal,
  NInput,
} from 'naive-ui'
import { Tools } from '@/types/Tools'
import { useRouter } from 'vue-router'

const router = useRouter()
const message = useMessage()

//#region 帖子信息
const mrLoading = ref(false)
const pageMessage = ref({ pageNumber: 1, pageSize: 10 } as PageBean)
const list = ref([] as TbMessage[])

const queryReportMessage = () => {
  mrLoading.value = true
  Api.get(
    `/admin/message/${pageMessage.value.pageSize}/${pageMessage.value.pageNumber}`,
    {},
    (data: BaseDataResult<PageVO<TbMessage>>) => {
      mrLoading.value = false
      if (data.success) {
        list.value = data.data.list
        pageMessage.value = data.data.pageBean
        return
      }
      message.error(data.message)
    },
  )
}

onMounted(() => {
  queryReportMessage()
})

const column = [
  {
    title: '发帖人id',
    key: 'uid',
  },
  {
    title: '帖子标题',
    key: 'title',
  },
  {
    title: '帖子发布时间',
    render: (row) => {
      return Tools.formatDate(row.lastupdate)
    },
  },
  {
    title: '处理结果',
    key: 'reason',
    render: (row) => {
      return h(
        'span',
        {
          style: {
            color: row.deleted == 'n' ? 'rgb(233,136,136)' : '',
          },
        },
        row.deleted == 'n' ? '待处理' : row.reason,
      )
    },
  },
  {
    title: '操作',
    width: 300,
    render: (row) => {
      return h(NSpace, {}, [
        // 跳转到帖子详情
        h(
          NButton,
          {
            text: true,
            type: 'info',
            size: 'small',
            onClick: () => {
              window.open(router.resolve(`/message/${row.mid}`).href)
              // router.push(`/message/${row.mid}`)
            },
          },
          '查看帖子详情',
        ),
        // 查看举报内容
        h(
          NButton,
          {
            text: true,
            type: 'primary',
            size: 'small',
            onClick: () => {
              showRIV(row)
            },
          },
          '查看举报信息',
        ),
        // 确认删除
        h(
          NButton,
          {
            text: true,
            type: 'error',
            size: 'small',
            disabled: row.deleted == 'y' ? true : false,
            onClick: () => {
              showDelete(row)
            },
          },
          '确认删帖',
        ),
      ])
    },
  },
] as Array<DataTableColumn<TbMessage>>

//#endregion

//#region 查询举报详情
const rivisible = ref(false)
const riLoading = ref(false)
const reportReasonList = ref([] as TbMessageReport[])
const pageInfo = ref({ pageNumber: 1, pageSize: 3 } as PageBean)
const rmid = ref(-1)

const showRIV = (info: TbMessage) => {
  pageInfo.value.pageNumber = 1
  reportReasonList.value = []
  rmid.value = info.mid
  rivisible.value = true
  queryReportMessageInfo()
}

const queryReportMessageInfo = () => {
  riLoading.value = true
  Api.get(
    `/admin/message/${rmid.value}/${pageInfo.value.pageSize}/${pageInfo.value.pageNumber}`,
    {},
    (data: BaseDataResult<PageVO<TbMessageReport>>) => {
      riLoading.value = false
      if (data.success) {
        reportReasonList.value = data.data.list
        pageInfo.value = data.data.pageBean
        return
      }
      message.error(data.message)
    },
  )
}

const rcolumn = [
  {
    title: '举报人',
    key: 'uid',
  },
  {
    title: '举报原因',
    key: 'info',
  },
  {
    title: '举报时间',
    key: 'created',
    render: (row) => {
      return Tools.formatDate(row.created)
    },
  },
] as DataTableColumn<TbMessageReport>[]

//#endregion

//#region 删除帖子
const dInfo = ref({ mid: -1, reason: '' } as TbMessage)
const dvisible = ref(false)
const dLoading = ref(false)
const showDelete = (info: TbMessage) => {
  dInfo.value.mid = info.mid
  dInfo.value.reason = ''
  dvisible.value = true
}

const deleteMessage = () => {
  dLoading.value = true
  Api.delete('/admin/message', dInfo.value, (data: BaseResult) => {
    dLoading.value = false
    if (data.success) {
      dvisible.value = false
      message.success('删除成功')

      queryReportMessage()
      return
    }
    message.error(data.message)
  })
}

//#endregion
</script>

<style scoped lang="scss"></style>
